<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">


	<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="../plugins/bootstrap-fileinput/css/fileinput.css">
	<script src="../plugins/bootstrap-fileinput/js/fileinput.js"></script>
	<script src="../plugins/bootstrap-fileinput/js/locales/zh.js"></script>

	<!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

	<link rel="stylesheet" href="../plugins/select2/select2.css" />
	<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
	<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>



</head>

<script>
	$(function () {
		$("#brandSelect").select2()
		getCat(0)
	})

	function getCat(obj){
		$.ajax({
			url: "/good/getCatInfo1",
			type: "post",
			dataType: "json",
			data: {parentId:obj},
			async: true,
			success: function (result) {
				if (result.code == 10000) {
					var cat1 = result.result;
					var str = "";
					str = str + "<option value = '-1'>请选择</option>";//获取大类之后中类要显示“请选择”
					for (var i = 0; i < cat1.length; i++) {
						str += '<option value="' + cat1[i].id + '">' + cat1[i].name + '</option>';
					}
					$("#select1").html(str);
				}
			},
			error: function (result) {
				alert("网络错误")
			}
		})
	}

	function getCat1(obj){
		$.ajax({
		url:"/good/getCatInfo1",
		type : "post",
		dataType :"json",
		data : {parentId:obj},
		async: true,
			success : function (result){
				if (result.code == 10000){
					var cat1 = result.result;
					var str = "";
					str = str + "<option value = '-1'>请选择</option>";//获取大类之后中类要显示“请选择”
					for (var i = 0; i < cat1.length; i++) {
						str += '<option value="' + cat1[i].id + '">' + cat1[i].name + '</option>';
					}
					$("#select2").html(str);
				}
			},
			error : function (result) {
				alert("网络错误")
			}
		})
	}

	function getCat2(obj){
		$.ajax({
			url:"/good/getCatInfo1",
			type : "post",
			dataType :"json",
			data : {parentId:obj},
			async: true,
			success : function (result){
				if (result.code == 10000){
					var cat1 = result.result;
					var str = "";
					str = str + "<option value = '-1'>请选择</option>";//获取大类之后中类要显示“请选择”
					for (var i = 0; i < cat1.length; i++) {
						str += '<option value="' + cat1[i].id + '">' + cat1[i].name + '</option>';
					}
					$("#select3").html(str);
				}
			},
			error : function (result) {
				alert("网络错误")
			}
		})
	}


	//模板ID
	function getCat3(obj){
		$.ajax({
			url:"/good/getTypeId",
			type:"post",
			data:{id:obj},
			dataType:"json",
			async:true,
			success:function (result){
				if (result.code==10000){
				var list = result.result;
					var str = "";
					str += '<input type="hidden" id="sss">'
					str +='模板ID:'+list.typeId+'';
					$("#span").html(str);
					$("#names").val(list.name)
					$("#sss").val(list.typeId)
					getTypeTemplate(list.typeId);
				}
			},
			error:function (result){
				alert("网络异常")
			}
		})

	}

	//关联模板
	function getTypeTemplate(id){
		$.ajax({
			url:"/good/getTypeTemplate",
			type:"post",
			dataType:"json",
			data:{id:id},
			async:false,
			success:function (result){
				var list = result.result;
				var parse = JSON.parse(list.brandIds);
				var str ="";
				//获取select2中所有选中的属性
				for (var i = 0; i < parse.length; i++) {
					str +="<option value='"+parse[i].id+"'>"+parse[i].text+"</option>";
				}
				$("#brandSelect").html(str);

				// 扩展属性
				var typeItems = result.result;
				var typeItemsJson = JSON.parse(typeItems.customAttributeItems);
				var type = "";
				for (let i = 0; i < typeItemsJson.length; i++) {
					type += "<div class='col-md-2 title'><span name='spanName'>"+typeItemsJson[i].text+"</span></div><div class='col-md-10 data'><input class='form-control' name='itemsName' placeholder='扩展属性'></div>"
				}
				// $("#selectId").html(str)
				$("#type_items").html(type)

				// 规格
				getSpecInfo(id);

			},
			error:function (result){
				alert("网络异常")
			}
		})
	}

	// 规格
	function getSpecInfo(id){
		$.ajax({
			url:"/good/getSpecInfo",
			type:"post",
			dataType:"json",
			data:{id:id},
			async:false,
			success:function (result){
				var specVOList =result.result;
				var content = "";
				for (var i=0; i<specVOList.length; i++){
					content += '<div>';
					content += '<input type="hidden" name="specificationName" value="'+ specVOList[i].tbSpecification.text +'">';
					content += '<div class="col-md-2 title">'+ specVOList[i].tbSpecification.text +'</div>';
					content += '<div class="col-md-10 data">';

					var optionList = specVOList[i].list;
					for (var j=0; j<optionList.length; j++){
						content += '<span>';
						content += '<input type="hidden"  value="'+ optionList[j].optionName +'">';
						content += '<input  type="checkbox" name="specificationValue" value="'+optionList[j].optionName+'">'+optionList[j].optionName;
						content += '</span>';
					}
					content += "</div>";
					content += "</div>";
				}
				$("#specification_div").html(content);
			},
			error:function (result){
				alert("网络出错了")
			}
		})
	}
			// success:function (result){
			//
			// 	var list = result.result;
			// 	var specs = '';
			// 	for (var i = 0; i < list.length; i++) {
			// 		specs += '<div><div id="specId" class=\'col-md-2 title\'>'+list[i].tbSpecification.text+'</div>';
			// 		specs += '<div class=\'col-md-10 data\'>'
			// 		for (let j = 0; j < list[i].list.length; j++) {
			// 			specs += '<span id="spanId">'
			// 			specs += '<input type="checkbox" id="inputId" value="'+list[i].list[j].id+'">'+list[i].list[j].optionName+'</span>'
			// 		}
			// 		specs += '</div></div>'
			// 	}
			// 	$("#spec_items").html(specs)
			// },
			// error:function (result){
			// 	alert("网络异常")
			// }

	//   保存 增加
	function getGoods(){
		editor.sync()
		var introduction = $("#introduction").val();
		/*扩展*/
		var spanName = $("[name=spanName]");
		var itemsName = $("[name=itemsName]");
		var str2 = "";
		for (let i = 0; i < itemsName.length; i++) {
			str2 += ',{"text":"'+$(spanName[i]).text()+'","value":"'+$(itemsName[i]).val()+'"}'
		}
		str2 = "[" + str2.substr(1) + "]";

		/*图片  颜色*/
		var imageS = $("[name=itemImages]")
		var colors = $("[name=colorName]")
		var str = "";
		for (let i = 0; i < imageS.length; i++) {
			str += ',{"color":"'+$(colors[i]).val()+'","url":"'+$(imageS[i]).val()+'"}'
		}
		str = "["+str.substr(1)+"]"

		//规格上面的获取
		var cationName = $("[name=specificationName]");
		var cationValue = $("[name=specificationValue]:checked");
		var arrXl = [];
		for (var x = 0; x < cationName.length; x++){
			arrXl.push({attributeName:cationName[x].value,attributeValue:[cationValue[x].value]})
		}
		var specificationJson = JSON.stringify(arrXl);

		//规格下面的table获取
		var json = {};
		var itemArr = [];

		var attkryArr = [];
		for (var m = 0; m < cationName.length; m++){
			attkryArr.push(cationName[m].value)
		}

		var trs = $("#tableId").find("tr"); //获取每个tr
		for (var i = 1; i < trs.length; i++){
			var tds = $(trs[i]).find("td") //获取每个td

			var tdZero = $(tds[0]).html().trim();
			var tdOne = $(tds[1]).html().trim();
			var inputTwo = $(tds[2]).find("input").val();
			var inputThree = $(tds[3]).find("input").val();
			json[attkryArr[0]] = tdZero;
			json[attkryArr[1]] = tdOne;
		}


		//  tb_item
		var goodsName = $("#goodsName").val();
		var caption = $("#caption").val();
		var title = goodsName + caption;
		//sku价格
		var price = $("#price").val();
		//库存
		var num = $("#num").val();

		var image = $("#itemImg").val();

		//取值
		var category = $("#names").val();

		var obj = $("#select_brandId option:selected");
		var brand = obj.text();

		var categoryId = $("#select3").val();

		var sellPoint = $("#introduction").val();

		var typeTemplateId = $("#sss").val();

		itemArr.push({title:title,sellPoint:sellPoint,price:price,num:num,image:image,categoryId:categoryId,status:1,createTime:new Date(),updateTime:new Date(),category:category,brand:brand,spec:json})
		var item = JSON.stringify(itemArr)




		$.ajax({
			url:"/good/insertGoodInfo",
			type : "post",
			dataType :"json",
			data : $("#goodForm").serialize()+"&introduction="+introduction+"&itemImages="+str+"&customAttributeItems="+str2+"&typeTemplateId="+typeTemplateId+"&tbItem=" + item+"&specificationItems="+specificationJson,
			async: true,
			success : function (result){
				if (result.code == 10000){
					alert(result.message);
					window.location.reload();
				}
			},
			error : function (result) {
				alert("网络错误")
			}
		})
	}

	// ------    文件上传      -------


	$(function () {
		$('#fileId').fileinput({
			language: 'zh',
			uploadUrl: "/good/upLoadFile",
			showUpload: true,
			showRemove: true,
			showClose: true,
			maxFileCount: 1,
			allowedFileExtensions: ['jpg', 'png', 'gif'],
			maxFileSize: 12400,
			enctype: "multipart/form-data",
			layoutTemplates: {
				/*actionDelete: ''*/
			},
			browseClass: 'btn btn-primary'
		});
		$("#fileId").on('fileuploaded', function (event, data, previewId, index) {
			if (data.response != null) {
				$("[name=itemImages]").val(data.response.imgUrl);
			}
		})
	})


	function insertImg(){
		var color = $("#color").val();
		var url = $("#itemImg").val();
		var images = ',{"color":"'+color+'","url":"'+url+'"}'
		var elementById = document.getElementById("tbodyId");
		var tr = document.createElement("tr");
		tr.innerHTML = "<td>"+color+"</td>" +
				"<td><img src='"+url+"' width='100px' height='100px'>" +
				"</td>" +
				"<td><button type='button' className='btn btn-default' onclick='deleteTd(this)' title='删除'><i className='fa fa-trash-o'></i> 删除</button>" +
				"</td><td><input name='imageS' type='hidden' value='"+images+"'></td>";
		elementById.append(tr)
	}

	function deleteTd(td){
		var parentElement = td.parentElement.parentElement;
		var elementById = document.getElementById("tbodyId");
		elementById.removeChild(parentElement)
	}



</script>


<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						<form id="goodForm">


                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->

								<div class="tab-pane active" id="home">
									<div class="row data-type">
									   <div class="col-md-2 title">商品分类</div>

										  <div class="col-md-10 data">
											<table>
												<tr>
													<td>
														<select class="form-control" name="category1Id" onclick="getCat1(this.value)" id="select1">

														</select>
													</td>
													<td>
														<select class="form-control select-sm" name="category2Id"  onclick="getCat2(this.value)" id="select2" >

														</select>
													</td>
													<td>
														<select class="form-control select-sm" name="category3Id" onclick="getCat3(this.value)"  id="select3"></select>
													</td>
													<td>
														<span id="span" name="typeTemplateId"></span>
														<!--模板ID:19-->
													</td>
												</tr>
											</table>

										  </div>


									   <div class="col-md-2 title">商品名称</div>
									   <div class="col-md-10 data">
										   <input type="text" class="form-control" id="goodsName"  name="goodsName"  placeholder="商品名称" value="">
									   </div>

									   <div class="col-md-2 title">品牌</div>
									   <div class="col-md-10 data">
										  <!--<select class="form-control"  ></select>-->
										   <select name="brandId" id="brandSelect" style="width: 100%">
										   </select>
									   </div>

									   <div class="col-md-2 title">副标题</div>
									   <div class="col-md-10 data">
										   <input type="text" class="form-control" name="caption" id="caption"  placeholder="副标题" value="">
									   </div>

									   <div class="col-md-2 title">价格</div>
									   <div class="col-md-10 data">
										   <div class="input-group">
											   <span class="input-group-addon">¥</span>
											   <input type="text" class="form-control" name="price"  placeholder="价格" value="">
										   </div>
									   </div>

									   <div class="col-md-2 title editer">商品介绍</div>
									   <div class="col-md-10 data editer">
										   <textarea id="introduction" name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
									   </div>

									   <div class="col-md-2 title rowHeight2x">包装列表</div>
									   <div class="col-md-10 data rowHeight2x">

										<textarea rows="4" name="packageList"  class="form-control"   placeholder="包装列表"></textarea>
									   </div>

									   <div class="col-md-2 title rowHeight2x">售后服务</div>
									   <div class="col-md-10 data rowHeight2x">
										   <textarea rows="4"  name="saleService"  class="form-control"  placeholder="售后服务"></textarea>
									   </div>


									</div>
								</div>

                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
										 <tbody id="tbodyId">

										 </tbody>
					                    <!--<tbody>
					                      <tr>
									            <td>
									            	<input type="text" name="">
									            </td>
									            <td>

									            </td>
												 <td> <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>
					                      </tr>
					                    </tbody>-->
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type">                                
	                                <div id="type_items">
		                               <!-- <div class="col-md-2 title">扩展属性1</div>
				                        <div class="col-md-10 data">
				                              <input class="form-control" placeholder="扩展属性1">	            	 
				                        </div>
	                                </div>       
									<div>
		                                <div class="col-md-2 title">扩展属性2</div>
				                        <div class="col-md-10 data">
				                              <input class="form-control" placeholder="扩展属性2">	            	 
				                        </div>-->
	                                </div>  									
                                </div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >
			                        </div>
                            	</div>
                            	<p>
                            	<div>
	                                <div class="row data-type" id="specification_div">
		                                <!--<div>
			                                <div class="col-md-2 title">屏幕尺寸</div>
					                        <div class="col-md-10 data">
					                            <span>
					                            	<input  type="checkbox" >4.0					                            				                            	
					                            </span>  	
												<span>
					                            	<input  type="checkbox" >4.5					                            				                            	
					                            </span>
												<span>
					                            	<input  type="checkbox" >5.0					                            				                            	
					                            </span>
					                        </div>
		                                </div>
										<div>
			                                <div class="col-md-2 title">网络制式</div>
					                        <div class="col-md-10 data">

					                            <span>
					                            	<input  type="checkbox" >2G
					                            </span>
												<span>
					                            	<input  type="checkbox" >3G
					                            </span>
												<span>
					                            	<input  type="checkbox" >4G
					                            </span>
					                        </div>
		                                </div> -->
	                                </div>
	
	                                
	                                <div class="row data-type" id="tableId">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody>
						                      <tr>
										            <td>
										            	4.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格" id="price">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量" id="num">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
										            <td>
										            	4.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格" id="price1">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量" id="num1">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
													<td>
										            	5.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格" id="price2">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量" id="num2">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>
											  <tr>
													<td>
										            	5.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格" id="price3">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量" id="num3">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >
										            </td>
						                      </tr>

						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                        </div>
							</form>
                        <!--tab内容/-->
						<!--表单内容/-->

                    </div>
                 	

                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="getGoods()" ><i class="fa fa-save"  ></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
				<input type="hidden" id="names">
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" name="colorName" id="color" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片<input type="hidden" name="itemImages" id="itemImg"></td>
		      		<td>
						<table>
							<tr>
								<td>
									<!--<img  src="" width="200px" height="200px">-->
									<input type="file" name="myFile" id="fileId" placeholder="请选择图片" multiple>
								</td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" onclick="insertImg()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

</script>
       
</body>

</html>